 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>roles</title>
    <script src="../../plugs/jquery-3.1.1.min.js"></script>
    <script src="../../assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- boostrap table  -->
   	<script type="text/javascript" src="../../plugs/jquery-3.1.1.min.js"></script>
	<!-- bootstrap -->
	<link rel="stylesheet" href="../../plugs/bootstrap/css/bootstrap.min.css">
<!--	<link rel="stylesheet" href="../../css/layer/mobile/need/layer.css">-->
	<script type="text/javascript" src="../../plugs/bootstrap/js/bootstrap.min.js"></script>
	<!-- 分页插件 -->
	<link rel="stylesheet" href="../../plugs/bootstrap-table/bootstrap-table.min.css">
	<script type="text/javascript" src="../../plugs/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="../../plugs/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
	<!-- 行内编辑 -->
	<script type="text/javascript" src="../../plugs/editable/bootstrap-editable.js"></script>
	<script type="text/javascript" src="../../plugs/editable/bootstrap-table-editable.js"></script>
	<link rel="stylesheet" href="../../css/layer/mobile/need/layer.css">
	<script type="text/javascript" src="../../css/layer/layer.js"></script>
</head>
<body>
<!--查询列表-->
<div class="container" style="margin-top:20px;width: 1200px">
			<div class="row">
				<!-- 表格 -->
				 <div id="toolbar">
					 <div class="input-group">
	<!--        			<input id="searchKey" type="text" placeholder="请输入搜索内容">-->
						<input type="text" id="searchKey" placeholder="请输入搜索内容">&nbsp;&nbsp;&nbsp;
						 <button value="删除" id="delete">删除</button>
						 <button value="搜索" id="search">搜索</button>
					 </div>
				</div>
				<div class="col-xs-12">
					<table class="table table-striped table-bordered table-hover" ></table>
				</div>
			</div>
</div>
<script src="../../business/js/buttonStyleCover.js"></script>
<script>
$(document).ready(function() 
{
	init();
	function init(){
		    	 //---先销毁表格 ---
		        $('table').bootstrapTable('destroy');  
		        //---初始化表格,动态从服务器加载数据--- 
		       // alert("hello");
				 $('table').bootstrapTable
				 ({
					//发送数据请求
			    	url: '../getPageRoles.do',
					method: 'post',
					contentType: "application/x-www-form-urlencoded",
					toolbar: '#toolbar',//自定义工具栏
					cache: false,
					height: 600,
					striped: true,
					//search: true,
					//showExport: true,
					//showColumns: true,
					//exportTypes: ['csv','txt','xml'],
					//search: true,
					clickToSelect: true,
					//【查询设置】
					/* queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
		                             设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber */
					queryParamsType:'', 
		           	queryParams: function queryParams(params) {
		             var param = {  
		                 pageNumber: params.pageNumber,    
		                 pageSize: params.pageSize,
		                 searchKey:$('#searchKey').val()
		             }; 
		             /*
		             for(var key in searchArgs){
		           	  param[key]=searchArgs[key]
		             }  
		             */
		             return param;                   
		           }, 
					//【其它设置】
		           locale:'zh-CN',//中文支持
		           pagination: true,//是否开启分页（*）
		           pageNumber:1,//初始化加载第一页，默认第一页
		           pageSize: 10,//每页的记录行数（*）
		           pageList: [10,15,20],//可供选择的每页的行数（*）
		           sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		           showRefresh:true,//刷新按钮
		           //【设置列属性】
					columns:
					 [
					 {field: 'check',checkbox: true},
					 {field: 'roleId',title: '角色id'}, 	
					 {field: 'roleName',title: '角色名称',editable: true},	 
					 {field: 'roleDesc',title: '角色描述',editable: true}, 
					 {field: 'roleStatus',title: '使用状态'}
					 /*
					 {field: 'seedsource',title: '地点', align: 'center',
						formatter:function(value,row,index){
						    var element = 
						    "<a class='edit' data-id='"+row.id +"'>编辑</a> "+ 
						    "<a class='delet' data-id='"+row.id +"'>删除</a> ";
						    return element;  
						} 
					  }
					  */
					],
					//行内编辑保存事件
					onEditableSave: function (field, row, oldValue, $el)
					{
						update(row);
					}	
		           
		           
		       });	
	}
			//搜索
			$('#search').click(function(){
				init();
			});
			  //删除数据
			  $('#delete').click(function(){
				 var rows = $('table').bootstrapTable('getSelections');
				 var rowsNum = rows.length;
				 if(rowsNum == 0)
				 {
					 layer.msg("未选择数据",{icon: 5});
				 }
				 else
				 {
					 //alert(rows[0].check);
					 //删除第一个check对象，后台不需要，必须处理
					 for(var i =0 ;i< rowsNum ;i++)
						delete rows[i]['check'];
					 $.ajax({
						  type: "post",
						  url: "../delRole.do",
						  data:{data:JSON.stringify(rows)},
						  //data:	rows,
						  success: function (data, status) {
							  if (status == "success") {
								  	layer.msg("删除成功",{icon: 1});
			                        //刷新页面
			                        $('table').bootstrapTable('refresh');  	
			                    }
			                },
			                error: function () {
								layer.msg("失败",{icon: 5});
			                }
			            });
				  }
			  });
			  
				
			  //修改数据  
			  function update(row)
			  {
				  //向服务器提交数据
				  $.ajax({
					  type: "post",
					  url: "../updateRole.do",
					  //data:{data:JSON.stringify(rows)},
					  data:	row,
					  success: function (data, status) {
						  if (status == "success") {
							  layer.msg("修改成功",{icon: 1});
							  $('table').bootstrapTable('refresh');
		                    }
		                },
		                error: function () {
							layer.msg("修改失败",{icon: 5});
		                }
		            });      
				  //end
			  } 
});
</script>
</body>
</html>